// pages/feedback/index.js
/*
1.点击“+”触发TAP点击上传事件
  1.调用小程序内置的选择图片的api
  2.获取到图片的路径 数组格式
  3.把图片路径 存入到data的变量中
  4、页面就可以根据 图片数组  进行循环显示 自定义图片组件
2.点击 自定义图片 组件
  1.获取被点击的元素 的索引
  2.获取data中的图片数组
  3.根据索引 删除数组中对应的图片
  4.把数组重新设置回data中

3.点击“提交”
   1.获取文本域的内容
      1.data中定义变量 表示 输入框的内容
      2.文本域 绑定 输入事件 事件触发的时候 把输入框的值 存入到变量中
   2.对这些内容 进行合法性验证
   3.验证通过  用户选择的图片上传到图片服务器 返回图片外网地址
     1.遍历图片数组
     2.挨个上传
     3.自己再来维护图片数组 存放 图片上传后的外网地址
   4.文本域和 图片地址 一起提交
   5.清空当前页面
   6.返回上一页
*/
Page({

  /**
   * 页面的初始数据
   */
  data: {
    txtValue:'',//文本域的nr
    chooseImages:[],//被选中的图片路径 数组
    tabs:[
      {
        id:0,
        value:'体验问题',
        isactive:true
      },
      {
        id:1,
        value:'商品投诉',
        isactive:false
      }
    ],
  },
  uploadImgs:[],//上传的图片数组外网地址
  handleTxtinput(e){//文本框输入事件
   
    let {value}=e.detail
    console.log(value)
    this.setData({
      txtValue:value
    })

  },
  handleFormSubmit(){//表单提交
   //1.获取文本域的内容
   const {txtValue,chooseImages}=this.data
   //2.合法性的验证
   if (!txtValue.trim()){
     //不合法 为空
     wx.showToast({
       title: '输入不合法',
       icon: 'none',
       image: '',
       duration: 1500,
       mask: true      
     });
     return false
   }
   //3.上传图片到专门的服务器
   // 上产文件的api 不支持 多个文件同时上传
   //只能遍历数组 挨个上传
   chooseImages.forEach((v,i)=>{
      console.log(v)
      wx.uploadFile({
        url: 'https://upload.cc/image_upload',//后台接收地址 新浪图床
        filePath: v,//被上传的文件路径
        name: 'file',//上传的文件名称 后台用来获取文件 约定为file
        formData: {},//顺带的文本信息
        success: (result)=>{
          console.log(result)
          let url=JSON.parse(result.ata) //对数据进行json解析
          console.log(url)
          this.uploadImgs.push(url)
          //所有的图片都上传完了才触发
          if(i===chooseImage.length-1){
            //最后一个图片都上传完了
            console.log("把文本内容和图片数组 上传")
            //提交成功了
            //重置页面
            this.setData({
              txtValue:'',
              chooseImage:[]
            })
            //返回上一页
            wx.navigateBack({
              delta: 1
            });
          }

        },
        fail: ()=>{},
        complete: ()=>{}
      });
   })
    
  },
  //标题点击事件 
  handelTabsItemChange(e){
    
    //1.获取被点击的标题索引 e.detail
    const {index}=e.detail
    console.log('index=',index)
    //2.修改源数组中被点击的
    let {tabs}=this.data
    tabs.forEach((v,i)=>i===index?v.isactive=true:v.isactive=false)
    //3.赋值到data
    console.log(tabs)    
    this.setData({
      tabs
    })    
  },
  handleImgChoose(){//点击图片选择事件
    //2.调用小程序内置的选择图片的api
    wx.chooseImage({
      count: 9, //同时选中的图片数量
      sizeType: ['original','compressed'],//图片的格式 原图 压缩
      sourceType: ['album','camera'],//图片的来源 相册 照相机
      success: (result)=>{
        //console.log(result)
        let {tempFilePaths}=result
        console.log(tempFilePaths)
        this.setData({
          //把图片数组进行拼接
          //原来的数组展开 上传数组展开 ，拼接
          chooseImages:[...this.data.chooseImages,...tempFilePaths]
        })
        console.log(this.data.chooseImages)
        
      },
      fail: ()=>{},
      complete: ()=>{}
    });

 
  },
  handelUpimgItemDel(e){//处理upimg组件删除事件
    //1.获取被删除的图片地址 e.detail
    console.log(e)
    const {index}=e.currentTarget.dataset
    console.log('upimgItemDel index',index)
    
    let {chooseImages}=this.data
    
   
    //从数组中删除元素
    chooseImages.splice(index,1)
   
    
    this.setData({chooseImages})

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})